<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="郝珍华">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .ding {
            height: 50px;
            background-color: #10c55b;
        }

        .zhong {
            height: 50px;
            width: 1200px;
            margin: 0 auto;
            /* border: 1px solid; */
            display: flex;
            justify-content: space-between;
        }

        .left {
            width: 430px;
            height: 50px;
            /* border: 1px solid; */
            position: relative;
        }

        .right {
            width: 280px;
            height: 50px;
            /* border: 1px solid; */
        }

        .ull li {
            float: left;
            /* margin-left: 20px; */
            line-height: 50px;
            height: 40px;
            z-index: 100;
            position: relative;
        }

        .ull li a {
            padding: 0 10px;
        }

        .zuo li {
            float: left;
            margin-left: 20px;
            line-height: 50px;
        }

        .ull a {
            text-decoration: none;
            color: #afffd0;
        }

        .zuo a {
            text-decoration: none;
        }

        .zhuan a {
            color: #afffd0;
            font-size: 16px;
        }

        .deng a {

            color: #fff;

            font-size: 12px;
        }

        .xiao {
            background-color: #01923d;
            border-color: #01923d;
            width: 57px;
            height: 30px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            border-radius: 4px;
        }

        .xiao .lu {
            margin-top: -10px;
        }

        .zuo .mian a {
            font-size: 12px;
            color: #01923d;
        }

        .zuo .zhuan .tu {
            width: 22px;
            height: 16px;
            background: url('./img/common.png') -156px -386px no-repeat;
            background-position-x: -126px;
            float: left;
            padding-right: 34px;
            margin-top: 19px;
        }

        .zuo .zhuan:hover {
            background-color: #01ac48;
        }


        .ull .first {
            background-color: #01ac48;
            width: 60px;
            height: 50px;
            text-align: center;
            /* margin-right: 2px; */
        }


        .ull .da a {
            font-size: 30px;
            position: absolute;
            margin-top: -8px;
            position: relative;
        }

        .daxiao {
            height: 124px;
            background-color: #fff;
            padding: 24px 0;
        }

        .daxiao .zuob {
            width: 668px;
            vertical-align: top;
            margin-left: 90px;
        }

        .logo {
            width: 141px;
            height: 65px;
            display: inline-block;
        }

        .zuob {

            height: 50px;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            position: relative;
            padding: 10px 15px;

            background-color: #fff;
        }

        .gouu {
            position: absolute;
            content: "";
            top: 13px;
            right: 12px;
            width: 12px;
            height: 7px;
            background: url('./img/common.png') -203px -27px no-repeat;
        }

        .logo a {
            display: block;
            width: 141px;
            height: 65px;
            background: url('./img/logo-x.png') no-repeat;
        }

        .gou {
            width: 12px;
            height: 7px;
            background: url('./img/common.png') -203px -27px no-repeat;
            background-position-x: -188px;
            float: right;
            margin-top: 25px;
        }


        .zhong1 {
            height: 50px;
            width: 1200px;
            margin: 0 auto;
        }

        .shang {
            width: 62px;
            position: relative;
            cursor: pointer;
            border-right: 1px solid #ccc;
            font-size: 14px;
            color: #666;
            display: inline-block;
            vertical-align: top;
            line-height: 30px;
        }

        .daxiao .xiaa {
            width: 500px;
        }

        .xiaa .input {
            text-indent: 10px;
            width: 100%;
            height: 30px;
            border: 0;
            line-height: 30px;
            font-size: 14px;
            color: #666;
        }

        .zuob .xiaa {
            display: inline-block;
            vertical-align: top;
            line-height: 30px;
        }

        .daxiao .zuob .hot {
            width: 80px;
        }

        .zuob .hot {
            position: absolute;
            height: 50px;
            top: -1px;
            right: -1px;
            border-radius: 0 4px 4px 0;
            background-image: linear-gradient(to right, #17e66c, #10c55b);
            text-align: center;
            border: 0;
        }

        .gouo {
            width: 20px;
            height: 20px;
            display: inline-block;
            margin-top: 15px;
            background: url('./img/common.png') -66px -446px no-repeat;
        }

        .daxiao .lot {
            position: absolute;
            top: 40px;
            left: 4px;
            color: #888;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
        }

        .lot a {
            text-decoration: none;
            margin-left: 10px;
        }

        .lot .a1,
        .a2,
        .a3,
        .a4,
        .a5 {

            color: #30CD71;
        }

        .dong {
            height: 320px;
            background-color: rgb(255, 248, 196);
            position: relative;
            z-index: 100;
        }

        .waib {
            height: 320px;
        }

        .zhong2 {
            height: 100px;
            width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        .zhong3 {
            /* height: 320px; */
            width: 1200px;
            margin: 0 auto;
            z-index: 100;
        }



        .zhong2 li {

            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .zhong2 li.current {
            display: block;
        }

        .prev {
            left: 0;
            background: url('./img/lun.png') no-repeat;
            height: 340px;
            width: 50px;
            position: absolute;
            top: 70px;
        }

        .prev:hover {
            background-position: -154px -2px;
        }

        .next:hover {
            background-position: -103px -3px;
        }

        .next {
            right: 0;
            background: url('./img/lun.png') no-repeat;
            height: 340px;
            width: 50px;
            position: absolute;
            top: 70px;
            background-position: -51px -1px;
        }

        i {
            display: inline-block;
            margin-right: 10px;
            width: 12px;
            height: 12px;
            border-radius: 100%;
            background-color: #FFF;
            cursor: pointer;
        }

        .redian {
            background-color: #10c55b;
            width: 12px;

            margin-right: 10px;
            border-radius: 100%;
        }

        .yuan {
            width: 668px;
            height: 200px;
            /* border: 1px solid; */
            position: absolute;
            z-index: 1;
            font-size: 0;
            border-radius: 12px;
            margin-top: 290px;
            margin-left: 540px;
        }

        .yuan i:hover {
            background-color: #10c55b;
        }

        .xiabian {
            margin-top: 36px;
            /* border: 1px solid; */
        }

        .xiabian1 {
            width: 1200px;
            margin: 0 auto;
            /* margin-left: 350px; */
        }

        .xiabian1 .icon {
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url('./img/common.png') no-repeat;
            vertical-align: bottom;
            margin-right: 10px;
            background-position: -96px -413px;
        }

        .xiabian1 .icon1 {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: url('./img/common.png') no-repeat;
            vertical-align: bottom;
            margin-right: 10px;
            background-position: -126px -415px;
        }

        .title {
            font-size: 24px;
            color: #666;
        }

        .f1 a {
            display: inline-block;
            margin-left: 20px;
            font-size: 14px;
            color: #888;
            vertical-align: 4px;
            text-decoration: none;
        }

        .f3 a {
            display: inline-block;
            margin-left: 20px;
            font-size: 14px;
            color: #888;
            vertical-align: 4px;
            text-decoration: none;
        }

        .f1 {
            width: 1200px;
        }

        .f3 {
            width: 1200px;
        }

        .f1 .a {
            float: right;
        }


        .f3 a.a1 {
            float: right;
        }




        .f4 {
            margin-top: 20px;
            width: 1200px;
            /* border:1px solid; */
            margin-left: 10px;
            display: flex;
            justify-content: space-between;
        }

        .f3 {
            width: 1200px;
            margin-top: 70px;
            /* border:1px solid; */
            margin-bottom: 20px;
        }

        .imgg {
            width: 290px;
            position: relative;
            cursor: pointer;
            padding-bottom: 30px;
            display: inline-block;
            z-index: 100;
        }

        .f4 .tupian {
            height: 386px;
            position: relative;
            overflow: hidden;
            background-color: #f5f5f5;
            z-index: 100;
        }

        .f4 .yuanc {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 53px;
            height: 53px;
            background: url('./img/common.png') no-repeat;
            background-position: 0 0;
        }

        .f4 a.xia1 {
            width: 100%;
            color: #666;
            left: 0;
            position: absolute;
            bottom: 0;
            z-index: 1;
            font-size: 14px;
            overflow: hidden;
            text-decoration: none;
        }

        main {
            background-color: #f6f6f6;
        }

        .zheng {
            margin-top: 300px;

            /* border:1px solid; */
            width: 100%;
            height: 200px;
        }

        .zheng1 {
            width: 100%;
            margin: 0 auto;
            height: 318px;
            background-color: #fff !important;
        }

        .dibu {
            width: 1200px;
            height: 318px;
            margin: 0 auto;
        }

        .shan1 {
            padding: 30px 0 0 18px;
            height: 263px;
        }

        .shan1 dl:first-child {
            width: 160px;
        }

        .shan1 dl {
            width: 150px;
        }

        .h1 {
            float: left;
        }

        .shan1 dt {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 700;
            color: #666;
            margin-left: 40px;
        }

        .shan1 dd a {
            text-decoration: none;
            font-size: 12px;
            line-height: 2;
            color: #888;
            cursor: pointer;
        }

        .zuobian {
            width: 310px;
            float: right;
        }

        .zuobian .p1 {
            color: #666;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 30px;
        }

        .zuobian .p1 a {
            color: #666;
            text-decoration: none;
            cursor: pointer;
        }

        .zuobian .p2 {
            margin-bottom: 15px;
            color: #666;
            font-size: 18px;
        }

        .zuobian .p2 .r1 {
            display: inline-block;
            width: 26px;
            height: 26px;
            vertical-align: middle;
            background: url('./img/common.png') no-repeat;
            background-position: -65px -176px;
        }

        .zuobian em {
            font-size: 14px;
            color: #666;
        }

        .zuobian .p3 {
            margin-bottom: 24px;
            color: #666;
            font-size: 18px;
        }

        .zuobian .p3 .r2 {
            display: inline-block;
            width: 26px;
            height: 26px;
            vertical-align: middle;
            background: url('./img/common.png') no-repeat;
            background-position: -34px -172px;
        }

        a {
            color: #666;
            text-decoration: none;
            cursor: pointer;
        }

        .zuobian .p4 {
            width: 140px;
            height: 40px;
            line-height: 40px;
            background-image: linear-gradient(to right, #17e66c, #10c55b);
            border: 0;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            display: inline-block;
            vertical-align: middle;
        }

        .zuobian .p4 .cla {
            display: block;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
            cursor: pointer;
        }

        .cla .r3 {
            display: inline-block;
            width: 26px;
            height: 26px;
            vertical-align: middle;
            background: url('./img/common.png') no-repeat;
            background-position: -1px -176px;
            margin-right: 10px;
        }

        .shan2 {
            border-top: 1px solid #ccc;
            height: 55px;
            line-height: 50px;
            padding-left: 50px;
        }

        .shan2 p {
            font-size: 12px;
            color: #888;
        }

        .shan2 .w1 {
            float: left;
        }

        .kou {
            display: inline-block;
            width: 26px;
            height: 26px;
            margin-right: 20px;
            vertical-align: middle;
            background: url('./img/common.png') no-repeat;
            background-position: -65px -206px;
        }

        .wei {
            display: inline-block;
            width: 26px;
            height: 26px;
            margin-right: 20px;
            vertical-align: middle;
            background: url('./img/common.png') no-repeat;
            background-position: -35px -206px;
            position: relative;
        }

        .tre2 a {
            display: inline-block;
            margin-right: 18px;
            color: #666;
            text-decoration: none;
            cursor: pointer;
        }

        .tre3 {
            float: right;
            margin-left: 90px;
        }

        .zuihou {
            display: inline-block;
            vertical-align: middle;
            width: 25px;
            height: 29px;
            background: url('./img/common.png') -162px -20px no-repeat;
        }

        .tupian1 {
            position: relative;
        }




        .f2 .tupian1 {
            float: left;
        }

        .f2 .tupian1:first-child {
            margin-left: 0;
        }

        .f2 .tupian1 {
            width: 290px;
            height: 200px;
            /* overflow: hidden; */
            position: relative;
        }

        .feng {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .5);
            display: none;
        }

        .feng span {
            color: #fff;
            font-size: 12px;
            display: block;
            text-align: center;
            overflow: hidden;
        }

        .feng .span1 {
            margin-left: 60px;
        }

        .feng .span2 {
            margin-left: 200px;
            margin-top: 6px;
        }

        .feng .i1 {
            display: block;
            width: 54px;
            height: 54px;
            margin-bottom: 4px;
            background: url('./img/common.png') no-repeat;
            background-position-x: -3px;
            background-position-y: -54px;
            margin-left: 150px;
        }

        .feng .i2 {
            display: block;
            width: 54px;
            height: 54px;
            margin-bottom: 4px;
            background: url('./img/common.png') no-repeat;
            background-position-x: -57px;
            background-position-y: -54px;
            margin-left: 220px;
            margin-top: -76px;
        }


        .bg {

            height: 50px;
            background-color: #01ac48;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
            transition: all 0.2s linear;
            /* margin-left: 20px;  */
        }

        .clearfix::after {
            content: '';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }

        .lot .luse1:hover {
            color: #30CD71;
        }

        .w1 .zu:hover {
            color: #30CD71;
        }

        .wei .img1 {
            position: absolute;
            top: -137px;
            left: -50px;
            display: none;
        }





        .f3 a:hover {
            color: red;
        }


        .f3 .a1:hover {
            color: red;
        }

        .h1 dt:hover {
            color: #10c55b;
        }

        .h1 dd a:hover {
            color: #10c55b;
        }
        /*index.css  */

        .container {
            width: 1200px;
            margin: 0 auto;
            /* min-width: 最小宽度 */
            min-width: 1200px;
        }
        /*导航  */

        .nav {
            width: 100%;
            height: 50px;
            background-color: #10c55b;
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            height: 50px;
        }
        /*左边选项  */

        .nav-left {
            display: flex;
        }
        /*右边选项  */

        .nav-right {
            display: flex;
        }

        .nav-right li.vip a {
            display: block;
            height: 50px;
            line-height: 50px;
            padding: 0 16px;
            color: #afffd0;
        }

        .nav-right li.vip a:hover {
            background-color: #01ac48;
            color: white;
        }

        .nav-right li.vip a::before {
            content: '';
            display: inline-block;
            width: 30px;
            height: 30px;
            background-image: url('img/common.png');
            background-position: -125px -385px;
            position: relative;
            top: 15px;
        }

        .nav-left li a {
            display: block;
            height: 50px;
            line-height: 50px;
            padding: 0 16px;
            color: #afffd0;
        }

        .nav-left li.active {
            background-color: #01ac48;
            color: white;
        }

        .nav-left li:nth-child(2) a::after {
            content: '';
            display: inline-block;
            width: 16px;
            height: 10px;
            background-image: url('img/common.png');
            background-position: -186px -25px;
        }

        .nav-left li a:hover {
            color: white;
            background-color: #01ac48;
        }

        .nav-right li.login a {
            display: block;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: white;
            background-color: #01923d;
            margin-top: 10px;
            margin-left: 10px;
            padding: 0 10px;
            border-radius: 5px;
        }

        .nav-right li.login a:hover {
            /*设置盒子阴影 水平方向 竖直方向 阴影模糊程度 颜色  */
            box-shadow: 0 0 3px #01923d;
        }

        .nav-right li.register a {
            display: block;
            height: 30px;
            padding: 0 10px;
            margin-left: 10px;
            margin-top: 10px;
            line-height: 30px;
            color: #01923d;
            font-size: 12px;
        }

        .hot:hover {
            opacity: 0.8;
            box-shadow: 0 0 0px #01923d;
        }

        .f1 .href {
            display: inline-block;
            position: relative;
            left: 500px;
            font-size: 14px;
            color: #888;
            vertical-align: 4px;
        }

        .jian {
            display: inline-block;
            margin-left: 30px;
            font-size: 14px;
            color: #888;
            vertical-align: 4px;
        }



        .f1 .href:hover {
            color: red;
        }

        .f1 .jian:hover {
            color: red;
        }


        .content-list {
            display: flex;
            justify-content: space-between;
            margin-top: 30px
        }

        .content {
            display: flex;
            justify-content: space-between;
            height: 416px;
        }

        .content-list>li {
            width: 290px;
            height: 200px;
            position: relative;
            /* 隐藏溢出容器的内容 */
            overflow: hidden;
        }

        .content>li {
            width: 290px;
            height: 200px;
            position: relative;
            /* 隐藏溢出容器的内容 */
            overflow: hidden;
        }

        .corver {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: all 0.3s;
        }

        .content .corver {
            width: 100%;
            height: 386px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: all 0.3s;
        }

        .content-list li:hover .corver {
            opacity: 1;
        }

        .content li:hover .corver {
            opacity: 1;
        }
        /* 精选专题 */

        .content-list .corver-info {
            width: 60%;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            position: absolute;
            top: 100%;
            left: 18%;
            /* margin-top: -16px; */
            padding-left: 23px;
        }

        .content-list .corver-info h3 {
            font-size: 24px;
            color: #fff;
            height: 32px;
            margin-bottom: 7px;
            margin-top: 10px;
        }

        .content-list .corver-info p {
            font-size: 14px;
            color: #e9e9e9;
            height: 20px;
            margin-bottom: 10px;
        }

        .content-list li:hover .corver-info {
            top: 30%;
            transition: all 0.3s;
        }
        /* 商用海报 */

        .content>li {
            height: 386px;
        }

        .content .corver-info {
            position: absolute;
            right: 20px;
            top: -90px;
            transition: all 0.3s;
        }

        .content .corver-info ul {
            display: flex;
            text-align: center;
        }

        .content .corver-info .download {
            width: 55px;
            height: 55px;
            background-image: url("img/common.png");
            background-position: 0 -55px;
        }

        .content .corver-info .heart {
            width: 55px;
            height: 55px;
            background-image: url("img/common.png");
            background-position: -55px -55px;
        }

        .content .corver-info .download:hover {
            background-position: 0 -111px;
        }

        .content .corver-info .heart:hover {
            background-position: -55px -111px;
        }

        .content>li:hover .corver-info {
            top: 20px;
        }

        .daziti {
            width: 1200px;
            height: 416px;
        }

        .xia1 {
            width: 100%;
            color: #666;
            left: 0;
            /* position: absolute; */
            bottom: 0;
            z-index: 1;
            font-size: 14px;
            overflow: hidden;
            text-decoration: none;
           
        }
        .baoguo{
           margin-top: -30px;
           width: 1200px;
           margin: -20px auto;
           display: flex;
           justify-content: space-between;
           margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="ding">

        <nav class="nav ">
            <div class="container nav-container">
                <ul class="nav-left">
                    <!-- (li>a[href=#])*5 -->
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#"><span>所有分类</span></a></li>
                    <li><a href="#">设计创意</a></li>
                    <li><a href="#">办公创意</a></li>
                    <li><a href="#">...</a></li>
                </ul>
                <ul class="nav-right">
                    <li class="vip"><a href="#"><span>VIP中心</span></a></li>
                    <li class="login"><a href="#">请登录</a></li>
                    <li class="register"><a href="#">免费注册</a></li>
                </ul>
            </div>
        </nav>
        <div class="daxiao">
            <div class="zhong1">
                <div class="logo">
                    <a href="#"></a>
                </div>
                <div class="zuob">
                    <div class="shang">全站
                        <div class="gouu"></div>
                    </div>
                    <div class="xiaa">
                        <input class=input type="text" placeholder="800万免费设计素材任意下载">
                    </div>
                    <div class="hot ">
                        <div class="gouo"></div>
                    </div>
                    <p class="lot">
                        <span>热门搜索：</span>
                        <a href="#" class="a1">七夕</a>
                        <a href="#" class="luse1">详情页</a>
                        <a href="#" class="a2">icon</a>
                        <a href="#" class="luse1">主图</a>
                        <a href="#" class="a3">秋季</a>
                        <a href="#" class="a4">PPT模板</a>
                        <a href="#" class="luse1">EXCEL模板</a>
                        <a href="#" class="luse1">首页</a>
                        <a href="#" class="luse1">个人简历</a>
                        <a href="#" class="a5">装饰画</a>

                    </p>
                </div>

            </div>
        </div>
        <div class="dong">
            <div class="waib">
                <div class="zhong2">
                    <div class="zhong3">
                        <ul class="ul">
                            <li class="current"><a href="#"><img src="./img/banner06.jpg" alt=""></a></li>
                            <li><a href="#"><img src="./img/banner02.jpg" alt=""></a></li>
                            <li><a href="#"><img src="img/banner03.jpg" alt=""></a></li>
                            <li><a href="#"><img src="img/banner04.jpg" alt=""></a></li>
                            <li><a href="#"><img src="img/banner05.jpg" alt=""></a></li>
                            <li><a href="#"><img src="img/banner01.jpg" alt=""></a></li>
                            <li><a href="#"><img src="img/banner07.jpg" alt=""></a></li>
                            <li><a href="#"><img src="img/banner08.jpg" alt=""></a></li>
                        </ul>

                    </div>

                    <div class="yuan">
                        <i class="redian"></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </div>

                </div>
                <span class="prev"></span>
                <span class="next"></span>
            </div>


        </div>
        <div class="xiabian">
            <div class="xiabian1">
                <div class="f1">
                    <i class="icon icon-jx"></i>
                    <span class="title">精选主题</span>

                    <span class="jian"> 100万党建素材，PPT汇报模板无限下载，每天仅需0.18元立享VIP特权</span>
                    <span class="href">更多 >></span>

                    <!-- <a href="#" class="a">更多 >></a> -->

                </div>
                <ul class="content-list">
                    <li>
                        <a href="#">
                        <img src="img/jxzt01.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <h3>和啤酒有关</h3>
                            <p>啤酒是如何拯救世界的</p>
                        </div>
                    </a>
                    </li>
                    <li>
                        <a href="#">
                        <img src="img/jxzt02.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <h3>爱的元素背景</h3>
                            <p>牛郎织女，鹊桥相会</p>
                        </div>
                    </a>
                    </li>
                    <li>
                        <a href="#">
                        <img src="img/jxzt03.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <h3>鲜花背景欣赏</h3>
                            <p>为你的设计锦上添花</p>
                        </div>
                    </a>
                    </li>
                    <li>
                        <a href="#">
                        <img src="img/jxzt04.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <h3>枫叶元素背景</h3>
                            <p>一叶而知秋</p>
                        </div>
                    </a>
                    </li>
                </ul>
                <div class="f3">
                    <i class="icon1"></i>
                    <span class="title">商用海报</span>
                    <a href="#">招聘海报</a>
                    <a href="#">配图海报</a>
                    <a href="#">企业文化</a>
                    <a href="#">促销海报</a>
                    <a href="#">原创插画</a>
                    <a href="#" class="a1">更多 >></a>
                </div>
                <div class="daziti">
                    <ul class="content">
                       
                            <li>
                                <a href="#">
                        <img src="img/syhb01.jpg" alt="">
                        
                        <div class="corver"></div>
                       
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="heart"></div>
                                    <p>45</p>
                                </a>
                            </li>
                            
                    </ul>
                    </div>
                    </a>
                    </li>
                   
                
                <li>
                    <a href="#">
                        <img src="img/syhb02.jpg" alt="">
                        <div class="corver"></div>
                        
                    <div class="corver-info">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="download"></div>
                                    <p>75</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="heart"></div>
                                    <p>45</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/syhb03.jpg" alt="">
                        <div class="corver"></div>
                        
                    <div class="corver-info">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="download"></div>
                                    <p>75</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="heart"></div>
                                    <p>45</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/syhb04.jpg" alt="">
                        <div class="corver"></div>
                         
                    <div class="corver-info">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="download"></div>
                                    <p>75</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="heart"></div>
                                    <p>45</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                    </a>
                </li>
                </ul>
           <div class="baoguo">
             <div href="#" class="xia1">超清新雪糕夏日凉爽海报</div>
             <div href="#" class="xia1">文艺夏日时光菠萝蓝色简约海报设计微信配图</div>
             <div href="#" class="xia1">七夕情人节扁平风创意简约商业海报设计模板</div>
             <div href="#" class="xia1">我的前半生文艺情感配图海报设计</div>
           </div>

            </div>
        </div>
    </div>
    <main>
        <div class="zheng"> </div>
        <div class="zheng1">
            <div class="dibu">
                <div class="shan1">
                    <dl class="h1">
                        <dt>常见问题</dt>
                        <dd>
                            <a href="#">成为特邀设计师</a>
                        </dd>
                        <dd>
                            <a href="#">成为原创贡献者</a>
                        </dd>
                        <dd>
                            <a href="#">注册登录</a>
                        </dd>
                        <dd>
                            <a href="#">账号/密码</a>
                        </dd>
                        <dd>
                            <a href="#">充值/售后</a>
                        </dd>
                        <dd>
                            <a href="#">版权投诉</a>
                        </dd>
                    </dl>
                    <dl class="h1">
                        <dt>关于千图网</dt>
                        <dd>
                            <a href="#">关于我们</a>
                        </dd>
                        <dd>
                            <a href="#">媒体报道</a>
                        </dd>
                        <dd>
                            <a href="#">加入我们</a>
                        </dd>
                        <dd>
                            <a href="#">心系千图</a>
                        </dd>
                        <dd>
                            <a href="#">每日最新</a>
                        </dd>

                    </dl>
                    <dl class="h1">
                        <dt>产品服务</dt>
                        <dd>
                            <a href="#">官方博客</a>
                        </dd>
                        <dd>
                            <a href="#">帮助中心</a>
                        </dd>
                        <dd>
                            <a href="#">千图导航</a>
                        </dd>

                    </dl>
                    <dl class="h1">
                        <dt>友情链接</dt>
                        <dd>
                            <a href="#">我图网</a>
                        </dd>
                        <dd>
                            <a href="#">千库网</a>
                        </dd>
                        <dd>
                            <a href="#">摄图网</a>
                        </dd>
                        <dd>
                            <a href="#">包图网</a>
                        </dd>
                        <dd>
                            <a href="#">视达网</a>
                        </dd>
                        <dd>
                            <a href="#">更多</a>
                        </dd>
                    </dl>
                    <div class="zuobian">
                        <p class="p1">
                            <a href="#">客服查询</a>
                        </p>
                        <p class="p2">
                            <i class="r1"></i> 400-998-7011
                            <em>(9:00-18:00)</em>
                        </p>
                        <p class="p3">
                            <i class="r2"></i>
                            <a href="#" class="aa">3054507416@qq.com</a>
                        </p>
                        <p class="p4">
                            <a href="#" class="cla">
                                    <i class="r3"></i>
                                    点我交谈
                                </a>
                        </p>
                    </div>
                </div>
                <div class="shan2">
                    <p class="w1 tre">
                        <a href="#" class="kou"></a>
                        <a href="#" class="wei">
                                <img src="./img/wechat-g.png" alt="" class="img1">
                            </a>
                    </p>
                    <p class="w1 tre2">
                        <a href="#" class="zhu1 zu">注册声明</a>
                        <a href="#" class="zhu2 zu">版权声明</a>
                        <a href="#" class="zhu3 zu">售后服务</a>
                    </p>
                    <p class="tre3">
                        Copyright ©2013-2017 千图网
                        <a href="#">沪ICP备10011451号-6</a>
                        <a href="#">
                                <i class="zuihou"></i>
                            </a> 上海工商 安全实名验证 信用网站
                    </p>
                </div>
            </div>
        </div>

    </main>
    </div>

</body>

</html>
<script>
    window.onload = function () {
        // 第一步 找标签
        var box = document.querySelector('.zhong3');
        var imgLis = document.querySelectorAll('.ul  li');
        var indicatorLis = document.querySelectorAll('.yuan i');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var wei = document.querySelector('.wei');
        var img1 = document.querySelector('.img1');
        var xiaaInput = document.querySelector('.xiaa input');
        var zuob = document.querySelector('.zuob');
        // 边框
        xiaaInput.onfocus = function () {
            zuob.style.borderColor = '#01ac48';
        }
        xiaaInput.onblur = function () {
            zuob.style.borderColor = '';
        }


        // 微信图片
        wei.onmouseover = function () {
            img1.style.display = 'block';
        }
        wei.onmouseout = function () {
            img1.style.display = 'none';
        }


        // 阴影层
        // var divs = document.querySelectorAll('.tupian1');
        // var yings = document.querySelectorAll('.ying1');
        // for (var i = 0; i < divs.length; i++) {
        //     divs[i].index = i;
        //     divs[i].onmouseover = function () {
        //         yings[this.index].style.display = "block";
        //     }
        //     divs[i].onmouseout = function () {
        //         yings[this.index].style.display = "none";
        //     }
        // }
        // var tupians = document.querySelectorAll('.tupian');
        // var fengs = document.querySelectorAll('.feng');
        // for (var j = 0; j < tupians.length; j++) {
        //     tupians[j].index = j;
        //     tupians[j].onmouseover = function () {
        //         fengs[this.index].style.display = 'block';
        //     }
        //     tupians[j].onmouseout = function () {
        //         fengs[this.index].style.display = 'none';
        //     }
        // }



        // 记录当前的索引值
        var index = 0;
        // 上一张
        function prevImg() {
            index = index == 0 ? index = imgLis.length - 1 : index - 1;
            showImg();
        }
        // 下一张
        function nextImg() {
            index = index == imgLis.length - 1 ? 0 : index + 1;
            showImg();
        }
        // 展示图片
        var bgColorArr = ['#fef8b3', '#feff0f', '#fdf100', '#2E9CFE', '#89dce3', '#060606', '#110204', '#f4cad8']
        var waib = document.querySelector('.waib');
        function showImg() {
            for (var i = 0; i < imgLis.length; i++) {
                imgLis[i].className = '';
                indicatorLis[i].className = '';
            }
            // 根据index的值，来显示图片和改变指示灯
            // console.log(index);
            imgLis[index].className = 'current';
            indicatorLis[index].className = 'redian';
            waib.style.backgroundColor = bgColorArr[index];

        }
        // 1,自动切换图片
        var timer = setInterval(nextImg, 1000);
        // 2,图片跟随指示灯切换
        for (var i = 0; i < indicatorLis.length; i++) {
            indicatorLis[i].index = i;
            indicatorLis[i].onclick = function () {
                // 鼠标进来，暂停自动切换
                clearInterval(timer);
                timer = null;
                // 根据鼠标选中的指示灯的索引来切换图片
                // 并记录和更新 index 的值
                index = this.index;
                showImg();
            }

        }
        // 3,点击按钮切换
        waib.onmouseover = function () {
            clearInterval(timer);
            timer = null;
            prev.style.display = 'block';
            next.style.display = 'block';
        }
        waib.onmouseout = function () {
            if (timer != null) {
                return;
            }
            timer = setInterval(nextImg, 1000);
            prev.style.display = 'none';
            next.style.display = 'none';
        }
        // 点击 上一张
        prev.onclick = function () {
            prevImg();
        }
        // 点击下一张
        next.onclick = function () {
            nextImg();
        }


    }

</script>